<template>
	<view class="tui-center">
		<tui-share-head showRight></tui-share-head>
		
		<view v-for="(item, index) in list" :key="index">
			<!--轮播图-->
			<view class="tui-banner-swiper">
				<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" @change="bannerChange"
					:style="{ height: scrollH + 'rpx' }">
					<block v-for="(img, imgIndex) in item.carouselList" :key="imgIndex">
						<swiper-item :data-index="imgIndex">
							<image :src="img.image" class="tui-slide-image" @tap="previewImage(imgIndex, 0)"/>
						</swiper-item>
					</block>
				</swiper>
				<tui-tag type="default" size="small" :text="bannerIndex+1 +'/'+ item.carouselList.length "></tui-tag>
			</view>
			
			<view class="tui-product-center">
				<view class="tui-product-align br-b">
					<view class="tui-product-title">{{item.title}}</view>
					<view class="tui-flex tui-space-between">
						<view>
							<text class="tui-product-pric">￥{{item.pric}}</text>
							<text class="tui-pd-left tui-product-g">/500g</text>
						</view>
						<view class="tui-product-sold">已售: {{item.sold}}</view>
					</view>
				</view>
				<view class="tui-product-two br-b">
					<view class="tui-flex tui-space-between">
						<view v-for="(i, idx) in item.checkboxList" :key="idx">
							<uni-icons type="checkbox" color="#39b54a" size="36"></uni-icons>
							<text class="tui-pd-left" style="color: #aaa;">{{i}}</text>
						</view>
					</view>
				</view>
				<view  class="br-b">
					<view>
						规格: 
						<text>500g</text>
						<text>1kg</text>
						<text>2.5kg</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import tuiTag from '@/components/uni-tag/uni-tag.vue'
	import tuiShareHead from '@/components/share-head/share-head.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default {
		name: 'product',
		components: {
			tuiTag,
			tuiShareHead,
			uniIcons
		},
		data() {
			return {
				id: '',
				list: [],
				bannerIndex: 0,
				scrollH: 540, //滚动总高度
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getList()
		},
		methods: {
			async getList() {
				this.list = await this.$api.json('productList')
				console.log(this.list)
			},
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current;
			},
			previewImage:function(index, flag){
				if(flag == 0) {
					var i = this.imageList; //获取当前页面的轮播图数据
				} else {
					var i = this.detailList; //获取当前页面的轮播图数据
				}
				uni.previewImage({
					current:index, //预览图片的下标
					urls:i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
		}
	}
</script>

<style lang="scss">
	.tui-space-between {
		justify-content: space-between;
	}
	.tui-banner-swiper {
		position: relative;
		background-color: #fff;
		.tui-slide-image {
			width: 100%;
			height: 100%;
			display: block;
			background-color: #fff;
		}
		.uni-tag {
			position: absolute;
			color: #fff;
			bottom: 54rpx;
			right: -4rpx;
			background: rgba(0, 0, 0, .7);
			border-radius: 30rpx 0 0 30rpx;
			border-color: rgba(0, 0, 0, .4);
			/deep/ .uni-tag--default {
				color: $uni-text-color-inverse;
			}
		}
	}
	.tui-product-center {
		background-color: $uni-bg-color;
		.tui-product-align {
			padding: $uni-spacing-row-lg $uni-spacing-row-lg 0;
			.tui-product-title {
				font-size: $uni-font-size-lg + 4rpx;
				font-weight: 900;
				color: $uni-text-color;
			}
			.tui-product-pric {
				font-size: $uni-font-size-lg + 8rpx;
				color: $uni-color-error;
			}
			.tui-product-g {
				font-size: $uni-font-size-sm;
				color: #aaa;
			}
			.tui-product-sold {
				color: #aaa;
			}
		}
		.tui-product-two {
			padding: $uni-spacing-row-sm 60rpx;
		}
	}
</style>
